<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    @font-face {
        font-family: 'Havefun';
        src: url('/Public/havefun/havefun.ttf');
    }
    html, body{
        height: 1920px; width: 1080px; padding: 0;
    }
    body{
        background: url('/Public/havefun/background.png') center no-repeat; background-size: 100% 100%;
        font-family: 'Havefun';
    }
    #main, #clue {
        display: flex; flex-direction: column; align-items: center;justify-content: center; height: 1920px; width: 1080px; margin: auto;
    }
    .content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%; width: 100%;
        font-size: 3rem;
    }
    .popup {
        display: none;
        position: fixed;
        width: 100%; height: 100%;
        top:0; left:0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;font-size:2rem;
    }
    h1{
        display: flex; flex-direction: column; align-items: center;justify-content: center;margin:auto;
    }
    a{
       margin-top: 10vh; width:30vh; height: 10vh;
    }
    a img{
        height: 100%; width: 100%;object-fit: contain;
    }
    a:active img{
        transform: scale(0.9);
    }
    .main-logo{
        margin-top: 30vh
    }
    .main-title{
        color: white;text-align: center; margin: 2vh auto; line-height: 2; letter-spacing: 0.5rem;
    }
    .main-logo{
        width: 50%;
    }
    .footer-icon{
        margin-bottom: 5vh; margin-top:auto;
    }
    #shop{
        align-items: center;justify-content: space-between;
    }
    .product{
        width: 100%; display: flex; flex-direction: column; align-items: center;justify-content: center;
        color: white;
    }
    .product-item{
        display: flex; flex-direction: row; align-items: center;justify-content: center; gap: 3rem; margin: 1rem 0 0;
        width: 85%;
    }
    .product-icon{
        background: url('/Public/havefun/item_bg.png') center no-repeat; background-size: 100% 100%;
        width: 169px; height: 169px; display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; flex-grow: 0;
    }
    .product-detail {
        display: flex; flex-direction: column; align-items: start;justify-content: center; 
        width: 90%;
    }
    .product-limit{
        font-size: 2rem; border: 1px solid white; border-radius: 1.5rem; padding: 0.3rem 3rem 0;letter-spacing: 0.2rem;;
    }
    .product-title{
        letter-spacing: 0.5rem;margin-top:2rem;font-size: 2.5rem;
    }
    .product-price{
        letter-spacing: 0.5rem;
    }
    .product-num {
        display: flex; flex-direction: row; align-items: center;justify-content: center; gap: 1rem;
        width: 60%;
    }
    .product-btn{
        width: 60px; height: 60px; border-radius: 50%; font-size: 4rem;line-height: 1;
        background-color: gray; border: none;font-weight: bold;color: white;
        flex-shrink: 0; flex-grow: 0;transition-duration: 0.2s;
    }
    .product-btn:active{
        transform: scale(0.8);
    }
    .btn-active{
        background-color: #e5b23b !important
    }
    .item-num{
        width: 50%; align-items: center;justify-content: center; text-align: center;
        font-size: 4.5rem;font-weight: bold;line-height: 10rem;margin-top: 0.3rem;
    }
    .btn-add{
        line-height: 1.05;
    }
    .balance{
        width: 85%;margin-top:50px; letter-spacing: 0.2rem;
        font-size: 3rem; color: white;
        display: flex; flex-direction: row; align-items: center;justify-content: center; gap: 3rem;
    }
    .balance-left{
        display: flex; flex-direction: column; align-items: start;justify-content: center;
    }
    .balance-right{
        display: flex; flex-direction: column; align-items: end;justify-content: center;
        margin-left: auto;
    }
    .shop-button{
        width: 1026px; height: 141px; margin: 60px 0 200px;
        background: url('/Public/havefun/confirm.png') center no-repeat; background-size: 100% 100%;
        border: none; transition-duration: 0.2s;
    }
    .shop-button:active{
        transform: scale(0.8);
    }
</style>
<body>
    <div id="main">
        <!-- logo界面 -->
        <div class="content" id="logo">
            <img class="main-logo" src="/Public/havefun//logo.png">
            <img class="footer-icon" src="/Public//havefun/footer.png">
        </div>
        <!-- 准备界面 -->
        <div class="content" id="ready">
            <img class="main-logo" src="/Public/havefun//logo.png">
            <h2 class="main-title">请将本阵营所有辛苦币<br/>倒入投币口</h2>
            <img class="footer-icon" src="/Public//havefun/footer.png">
        </div>
        <!-- 等待界面 -->
        <div class="content" id="loading">
            <img class="rotate" src="/Public/havefun/loading.png">
            <h1 class="main-title" style="letter-spacing: 1rem;">等待中</h1>
        </div>
        <!-- 商品界面 -->
        <div class="content" id="shop">
            <div class="balance">
                <div class="balance-left">
                    <p>您选择优势道具</p>
                    <p id="balance-num">共0件</p>
                </div>
                <div class="balance-right">
                    <p>所剩余额</p>
                    <p id="balance-bonus"></p>
                </div>
            </div>
            <div class="product">
                <volist name="product" id="vo">
                    <div class="product-item" id="product-{$vo.id}">
                        <div class="product-icon">
                            <img src="/Public/havefun/{$vo.id}.png">
                        </div>
                        <div class="product-detail">
                            <div class="product-title">{$vo.title}</div>
                            <div class="product-price">￥<b>{$vo.price}</b></div>
                            <div class="product-limit">此道具限购{$vo.max}件</div>
                        </div>
                        <div class="product-num">
                            <button id="btn-reduce-{$vo.id}" data-product-id="{$vo.id}" data-type="reduce" class="product-btn btn-reduce">-</button>
                            <div id="item-num-{$vo.id}" data-price="{$vo.price}" data-limit="{$vo.max}" class="item-num">0</div>
                            <button id="btn-add-{$vo.id}" data-product-id="{$vo.id}" data-type="add" class="product-btn btn-add">+</button>
                        </div>
                    </div>

                </volist>
            </div>
            <div class="shop-footer>">
                <button id="shop-confirm" class="shop-button"></button>
            </div>
        </div>
        <!-- 成功界面 -->
        <div class="content" id="success">
            <img class="main-logo" src="/Public/havefun//logo.png">
            <h1 class="main-title">交易成功</h1>
            <img class="footer-icon" src="/Public//havefun/footer.png">
        </div>
    </div>
</body>
<script>
    // 全局变量 管理状态
    var status = 'ready' // ready loading shop success
    var balance = 0
    var currentStatus = 'ready'
    var currentBalance = 0
    var cart = {}
    var shop = {}
    // 刷新
    function getData(){
        $.ajax({
            url:'/Home/Havefun/get_client_data',
            type:'post',
            success:function(res){
                console.log(res);
                status = res.data.status
                balance = Number(res.data.balance)
                shop = res.data.shop
                // 刷新数据
                update();
                // 2秒后再次请求
                setTimeout(()=>{
                    getData()
                },2000)
            }
        })
    }
    getData()
    function update(){
        let pageLogo = $('#logo')
        let pageReady = $('#ready')
        let pageLoading = $('#loading')
        let pageShop = $('#shop')
        let pageSuccess = $('#success')
        pageLogo.css('display', status == 'ready' ? 'flex' : 'none')
        pageReady.css('display', status == 'start' ? 'flex' : 'none')
        pageLoading.css('display', status == 'loading' ? 'flex' : 'none')
        pageShop.css('display', status == 'shop' ? 'flex' : 'none')
        pageSuccess.css('display', status == 'success' ? 'flex' : 'none')
        // 刚刚切换到shop状态
        if(currentStatus != 'shop' && status == 'shop'){
            currentBalance = balance
            // 初始化数据
            for(let i = 1; i <= 5; i ++){
                // 重置购物车
                cart[i] = 0
                // 更新商品
                /**
                 * <div class="product-detail">
                        <div class="product-title">{$vo.title}</div>
                        <div class="product-price">￥<b>{$vo.price}</b></div>
                        <div class="product-limit">此道具限购{$vo.max}件</div>
                    </div>
                    <div class="product-num">
                        <button id="btn-reduce-{$vo.id}" data-product-id="{$vo.id}" data-type="reduce" class="product-btn btn-reduce">-</button>
                        <div id="item-num-{$vo.id}" data-price="{$vo.price}" data-limit="{$vo.max}" class="item-num">0</div>
                        <button id="btn-add-{$vo.id}" data-product-id="{$vo.id}" data-type="add" class="product-btn btn-add">+</button>
                    </div>
                 */
                $('#product-' + i).find('.product-title').text(shop[i].title)
                $('#product-' + i).find('.product-price').html('￥<b>' + shop[i].price + '</b>')
                $('#product-' + i).find('.product-limit').text('此道具限购' + shop[i].limit + '件')
                $('#item-num-' + i).data('limit', shop[i].limit)
                $('#item-num-' + i).data('price', shop[i].price)
            }
            updateCart()
            
        }
        currentStatus = status
    }
    function updateCart(){
        let restBalance = currentBalance
        let balanceNum = 0;
        for(let i = 1; i <= 5; i ++){
            balanceNum += cart[i]
            let price = $('#item-num-'+i).data('price')
            restBalance -= cart[i] * price
        }
        for(let i = 1; i <= 5; i ++){
            let price = $('#item-num-'+i).data('price')
            $('#item-num-' + i).text(cart[i])
            $('#btn-reduce-'+i).toggleClass('btn-active', cart[i] > 0)
            $('#btn-add-'+i).toggleClass('btn-active', (cart[i] < $('#item-num-'+i).data('limit')) && (restBalance >= price))
        }
        $('#balance-bonus').text("￥"+restBalance)
        $('#balance-num').text('共' + balanceNum + '件')
    }
    $(".product-btn").click(function(){
        let productId = $(this).data('product-id')
        let type = $(this).data('type')
        if(type == 'reduce'){
            if(cart[productId] > 0){
                cart[productId] --
            }
            else{
                weui.toast('不能再少了', 700)
            }
        }else if(type == 'add'){
            let restBalance = currentBalance
            for(let i = 1; i <= 5; i ++){
                if(cart[i] > 0){
                    let price = $('#item-num-'+i).data('price')
                    restBalance -= cart[i] * price
                }
            }
            let limit = Number($('#item-num-'+productId).data('limit'))
            let price = Number($('#item-num-'+productId).data('price'))
            if(cart[productId] < limit && restBalance >= price){
                cart[productId] ++
            }
            else if(cart[productId] >= limit){
                weui.toast('不能再多了', 700)
            }
            else{
                weui.toast('余额不足', 700)
            }
        }
        updateCart()
    })
    $("#shop-confirm").click(function(){
        let loading = weui.loading('提交中...')
        console.log(cart);
        let balanceNum = 0;
        for(let i = 1; i <= 5; i ++){
            balanceNum += cart[i]
        }
        if(balanceNum == 0){
            loading.hide()
            weui.toast('请选择商品', 700)
            return
        }
        $.ajax({
            url:'/Home/Havefun/set_cart',
            type:'post',
            data:{
                cart: {
                    cart: cart
                }
            },
            success:function(res){
                loading.hide()
                if(res.status == 1){
                    weui.toast('购买成功', 1000, function(){
                        status = 'success'
                        update()
                        console.log('success', status);
                    })
                }
                else{
                    weui.toast(res.msg, 2000)
                }
            },
            error:function(){
                loading.hide()
                weui.toast('网络异常', 2000)
            }
        })
    })
</script>
</html>